<!doctype html>
<!--
 * Jodit Editor (https://xdsoft.net/jodit/)
 * License GNU General Public License version 2 or later;
 * Copyright 2013-2020 Valeriy Chupurnov https://xdsoft.net
-->
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>One Instance Jodit Example</title>
    <link rel="icon" type="image/png" href="assets/icon.png" />
</head>
<body>
<header>
    <nav>
        <ul class="container">
            <li><a href="https://xdsoft.net/jodit/">Jodit homepage</a></li>
            <li><a href="https://xdsoft.net/jodit/play.html">Playground</a></li>
            <li><a href="https://xdsoft.net/jodit/doc/">Documentation</a></li>
            <li><a href="https://github.com/xdan/jodit/">Github</a></li>
            <li><a href="https://github.com/xdan/jodit/blob/master/CHANGELOG.MD">Changelog</a></li>
            <li>
                <a href="#examples">Examples</a>
                <ul id="examples"><!-- see app.js--></ul>
            </li>
            <li style="float:right"><a href="https://github.com/xdan/jodit/releases/latest">Download</a></li>
        </ul>
    </nav>
</header>
<div id="main_container" class="container">
    <div id="introduction">
        <p>You can create Jodit only when you need.</p>
        <h3>HTML</h3>
        <pre><code class="language-markup">
            &lt;div class="editor" id="editor1">Some text&lt;/div>
            &lt;div class="editor" id="editor2">Some text&lt;/div>
            &lt;div class="editor" id="editor3">Some text&lt;/div>
            &lt;div class="editor" id="editor4">Some text&lt;/div>
            &lt;div class="editor" id="editor5">Some text&lt;/div>
            &lt;div class="editor" id="editor6">Some text&lt;/div>
        </code></pre>
        <h3>JavaScript</h3>
        <pre><code class="language-javascript">
            var editors = [].slice.call(document.querySelectorAll('.editor'));
            editors.forEach(function (div) {
                div.addEventListener('click', function (e) {
                    if (!Jodit.instances[div.id]) {
                        Object.keys(Jodit.instances).forEach(function (id) {
                            Jodit.instances[id].destruct();
                        });

                        var editor = new Jodit(div, {
                            preset: 'inline'
                        });

                        editor.s.insertCursorAtPoint(e.clientX, e.clientY);
                    }
                });
            });
        </code></pre>
    </div>
    <div class="result">
        <div class="editor" id="editor1">Some text</div>
        <div class="editor" id="editor2">Some text</div>
        <div class="editor" id="editor3">Some text</div>
        <div class="editor" id="editor4">Some text</div>
        <div class="editor" id="editor5">Some text</div>
        <div class="editor" id="editor6">Some text</div>
    </div>
</div>
<footer>
    <nav>
        <ul class="container">
            <li><a href="https://xdsoft.net/jodit/">Jodit homepage</a></li>
            <li><a href="https://xdsoft.net/jodit/play.html">Playground</a></li>
            <li><a href="https://xdsoft.net/jodit/doc/">Documentation</a></li>
            <li><a href="https://github.com/xdan/jodit/">Github</a></li>
            <li><a href="https://github.com/xdan/jodit/blob/master/CHANGELOG.MD">Changelog</a></li>
            <li style="float:right"><a href="https://github.com/xdan/jodit/releases/latest">Download</a></li>
        </ul>
    </nav>
</footer>
</body>
<link rel="stylesheet" href="../build/jodit.min.css"/>
<link rel="stylesheet" href="assets/app.css"/>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,700,700i" rel="stylesheet">

<script src="../build/jodit.min.js"></script>
<script src="assets/prism.js"></script>
<script src="assets/app.js"></script>
<style>
    .editor {
        margin-bottom: 10px;
        padding: 10px;
        border: 1px dashed red;
    }
    .editor p{
        margin: 0 0 10px 0;
    }
    .jodit-container, .jodit-container .jodit-workplace {
        min-height: auto;
    }
</style>
<script>
    var editors = [].slice.call(document.querySelectorAll('.editor'));

    editors.forEach(function (div) {
        div.addEventListener('click', function (e) {
            if (!Jodit.instances[div.id]) {
                Object.keys(Jodit.instances).forEach(function (id) {
                    Jodit.instances[id].destruct();
                });

                var editor = new Jodit(div, {
                    preset: 'inline'
                });

                editor.s.insertCursorAtPoint(e.clientX, e.clientY);
            }
        });
    });
</script>
</html>
